<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="titleBox">
      <!-- icon-dingdan -->
      <div class="iconfontcolor icon-dingdan"></div>
      <div class="infoBox">
        <div class="info_line1">
          <h3 class="tit">{{ contractInfo.contractNumber }}</h3>
          <div class="tag" v-if="contractInfo.contractType.value === 1">
            合同执行中
          </div>
          <div class="tag" v-if="contractInfo.contractType.value === 2">
            合同已到期
          </div>
          
        </div>
        <div class="info_line2">
          <div style="margin-right: 15px">
            创建时间：{{ contractInfo.createTime }}
          </div>
          <div>创建人:{{ contractInfo.createBy }}</div>
        </div>
      </div>
      <div class="feeGroup">
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">合同期限</div>
            <div class="price" v-if="contractInfo.contractPeriod != null">
              {{
                contractInfo.contractPeriod + contractInfo.contractPeriodUnit
              }}
            </div>
            <div class="price" v-else>
              --.--
            </div>
          </div>
        </div>
      </div>
      <!-- <button class="examineBtn" @click="getDetail(contractId),showAddDialog()">
                <i class="iconfont icon-tianjiaxuqian"></i>
                <span>续签</span>
            </button> -->
    </div>
    <div class="main_item">
      <titleVue :title="'合同信息'"></titleVue>
      <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
        color: '#939393',
        fontSize: '12px',
        fontWeight: 'bold',
        marginRight: '20px',
      }" :contentStyle="{ color: '#262626', fontSize: '12px' }">
        <el-descriptions-item label="合同类型">{{
          contractInfo.contractingPartyType
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商">
          <span v-if="contractInfo.supplierName != null">{{
            contractInfo.supplierName
          }}</span>
          <span v-else>无</span>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="合同名称">{{
          contractInfo.contractName
        }}</el-descriptions-item> -->
        <el-descriptions-item label="项目名称">{{
          contractInfo.projectName  || '无'
        }}</el-descriptions-item>
        <el-descriptions-item label="计费标准">
          <span v-if="contractInfo.charging != null">{{
            contractInfo.charging + contractInfo.chargingUnit
          }}</span>
          <span v-else>无</span>
        </el-descriptions-item>
        <el-descriptions-item label="结算账期">
          <span v-if="contractInfo.settlementPeriod != null">{{
            contractInfo.settlementPeriod + contractInfo.settlementPeriodUnit
          }}</span>
          <span v-else>无</span>
        </el-descriptions-item>
        <el-descriptions-item label="合同开始日期">{{
          contractInfo.contractStartTime
        }}</el-descriptions-item>
        <el-descriptions-item label="发票类型">{{
          contractInfo.invoiceType
        }}</el-descriptions-item>
        <el-descriptions-item label="发票税率">
          <span v-if="contractInfo.taxRate != null">{{ contractInfo.taxRate }}%</span>
          <span v-else>无</span>
        </el-descriptions-item>
        <el-descriptions-item label="保证金" :span="3">
          <span v-if="contractInfo.earnestMoney != null">{{ contractInfo.earnestMoney }}元</span>
          <span v-else>无</span>
        </el-descriptions-item>
        <el-descriptions-item label="合同结束日期 ">
          <span v-if="contractInfo.contractEndTime != null">{{
            contractInfo.contractEndTime
          }}</span>
          <span v-else>无</span>
        </el-descriptions-item>
        <el-descriptions-item label="合同附件">
          <div class="contractfile">
            <i class="iconfontcolor icon-lianjie" v-if="contractInfo.signImage != null"></i>
            <span class="fileName" @click="showFile" v-if="contractInfo.signImage != null">附件.{{
              contractInfo.signImage.split(".")[
                contractInfo.signImage.split(".").length - 1]
            }}</span>
            <span v-if="contractInfo.signImage == null">无</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="合同备注">
          <span>{{
            contractInfo.contractRemarks || '无'
          }}</span>

        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 添加合同弹窗 -->
    <el-dialog class="dialog" title="续签合同" :visible.sync="visibleAddBox" width="840px">
      <el-form ref="addContractForm" :model="addContractForm" :rules="addContractRules" label-width="110px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="供应商" prop="cargoOwnerName">
              <el-select v-model="addContractForm.supplierName" filterable remote reserve-keyword style="width: 100%"
                placeholder="请选择内容" @change="changeSupplierName" :remote-method="supplierNameSearch"
                :loading="supplierNamesLoading">
                <el-option v-for="item in supplierNamesOps" :key="item.index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber" placeholder="请输入内容">
              <el-input v-model="addContractForm.contractNum" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应货主合同" prop="projectName">
              <el-select v-model="addContractForm.cargoContractName" filterable remote reserve-keyword style="width: 100%"
                placeholder="请选择内容" @change="changeCargoCName" :remote-method="cargoCNameSearch"
                :loading="cargoCNamesLoading">
                <el-option v-for="item in cargoCNameOps" :key="item.index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="addContractForm.contractName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="计费标准" prop="charging">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.charging" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.chargingUnit"
                  :placeholder="addContractForm.chargingUnit">
                  <el-option v-for="item in WeightArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算账期" prop="settlementPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.settle" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.settleUnit"
                  :placeholder="addContractForm.settleUnit">
                  <el-option v-for="item in timeArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票类型" prop="invoiceType">
              <el-select v-model="addContractForm.invoiceType" style="width: 100%">
                <el-option v-for="item in invoiceArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票税率" prop="taxRate">
              <el-input v-model="addContractForm.invoiceRatio" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  %
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.period" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.periodUnit"
                  :placeholder="addContractForm.periodUnit">
                  <el-option v-for="item in termArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金" prop="earnestMoney">
              <el-input v-model="addContractForm.earnestMoney" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同开始日期" prop="contractStartTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.startDate" type="date" placeholder="请选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" prop="contractEndTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.endDate" type="date" placeholder="请选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同附件" prop="signImage">
              <!-- action	必选参数，上传的地址 -->
              <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
              <!-- on-remove	文件列表移除文件时的钩子 -->
              <!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->

              <!-- limit	最大允许上传个数 -->
              <!-- on-exceed	文件超出个数限制时的钩子 -->
              <!-- file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
              <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
                :before-remove="beforeRemove" :file-list="fileList" :limit="1" :on-exceed="handleExceed"
                :on-success="uploadFileSuccess" :headers="headers" :auto-upload="true" ref="uploadRef">
                <el-button size="small" class="uploadBtn" type="primary">文件上传</el-button>
                <span slot="tip" class="el-upload__tip">支持PDF、JPG等格式</span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同备注" prop="contractRemarks" class="notes" placeholder="请输入内容">
              <el-input v-model="addContractForm.remark" resize="none" :rows="3" type="textarea" maxlength="200"
                show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="visibleAddBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="cofime">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue.vue";
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";
export default {
  data() {
    return {
      activeName: "first",
      contractId: this.$route.params.contractId,
      contractInfo: {
        contractId: "",
        contractingPartyId: "",
        contractingPartyType: "",
        contractType: {},
        contractNumber: "",
        projectName: "",
        contractName: "",
        charging: "",
        chargingUnit: "",
        settlementPeriod: "",
        settlementPeriodUnit: "",
        invoiceType: "",
        taxRate: "",
        contractPeriod: "",
        contractPeriodUnit: "",
        earnestMoney: "",
        contractStartTime: "",
        contractEndTime: "",
        contractRemarks: "",
        signImage: "",
        supplierCargoContractId: "",
        cargoContractName: "",
        createTime: "",
        supplierName: "",
      },
      visibleAddBox: false, //是否显示续签合同窗口
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      //续签合同表单数据
      addContractForm: {
        contractId: "",
        contractingPartyId: "",
        supplierName: "",
        contractNum: "",
        supplierCargoContractId: "",
        cargoContractName: "",
        contractName: "",
        charging: "",
        chargingUnit: "",
        settle: "",
        settleUnit: "",
        invoiceType: "",
        invoiceRatio: "",
        period: "",
        periodUnit: "",
        earnestMoney: "",
        startDate: "",
        endDate: "",
        fileUrls: "",
        remark: "",
        projectName: "",
      },
      //表单数据验证
      addContractRules: {
        supplierName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        contractNum: [{ required: true, message: "不能为空", trigger: "blur" }],
        cargoContractName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        contractName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        charging: [{ required: true, message: "不能为空", trigger: "blur" }],
        settle: [{ required: true, message: "不能为空", trigger: "blur" }],
        period: [{ required: true, message: "不能为空", trigger: "blur" }],
        periodUnit: [{ required: true, message: "不能为空", trigger: "blur" }],
        startDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        endDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceType: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceRatio: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        earnestMoney: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      WeightArr: [
        { value: "吨", label: "吨" },
        { value: "千克", label: "千克" },
      ],
      WeightValue: "吨",
      timeArr: [
        // 结算周期选项
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      timeValue: "月",
      invoiceArr: [
        // 发票类型选择
        { value: 0, label: "无需开票" },
        { value: 1, label: "电子发票" },
        { value: 2, label: "增值税专用发票" },
        { value: 2, label: "普通发票" },
      ],
      invoiceValue: "年",
      termArr: [
        // 合同期限 选择
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      termValue: "年",
      supplierNames: [], //供应商名称列表
      supplierNamesOps: [], //供应商匹配名称列表
      supplierNamesLoading: true,
      cargoCNames: [
        //货主合同名称列表
        { index: 1, id: "1", name: "唐洪飞" },
        { index: 2, id: "2", name: "周杰伦" },
      ],
      cargoCNameOps: [], //货主合同名称匹配列表
      cargoCNamesLoading: true,
      url: BASEURL.TCHYURL + "/file/upload",
      fileList: [],
    };
  },
  methods: {
    //在新链接打开文件
    showFile() {
      // window.location.href=this.contractInfo.signImage
      window.open(this.contractInfo.signImage);
    },
    //取得供应商表单回填数据
    getDetail(id) {
      ////console.log("contractId=" + id);
      let v = this;
      let args = {
        contractId: id,
      };
      httpApi.contractManagementApi
        .getSupplierContractDetails(args)
        .then(function (rsp) {
          let dat = rsp.data.data;
          ////console.log("供应商合同信息获取完毕,rsp=", rsp);
          if (rsp.data.code == 500) {
            alert(rsp.data.msg);
            return;
          }
          v.addContractForm.contractId = id;
          v.addContractForm.contractingPartyId = dat.contractingPartyId;
          v.addContractForm.supplierName = dat.supplierName;
          v.addContractForm.contractNum = dat.contractNumber;
          v.addContractForm.supplierCargoContractId =
            dat.supplierCargoContractId;
          v.addContractForm.cargoContractName = dat.cargoContractName;
          v.addContractForm.contractName = dat.contractName;
          v.addContractForm.charging = dat.charging;
          v.addContractForm.chargingUnit = dat.chargingUnit;
          v.addContractForm.settle = dat.settlementPeriod;
          v.addContractForm.settleUnit = dat.settlementPeriodUnit;
          v.addContractForm.invoiceType = v.invoiceArr[dat.invoiceType].value;
          v.addContractForm.invoiceRatio = dat.taxRate;
          v.addContractForm.period = dat.contractPeriod;
          v.addContractForm.periodUnit = dat.contractPeriodUnit;
          v.addContractForm.earnestMoney = dat.earnestMoney;
          v.addContractForm.startDate = dat.contractStartTime;
          v.addContractForm.endDate = dat.contractEndTime;
          v.addContractForm.fileUrls = dat.signImage;
          v.addContractForm.remark = dat.contractRemarks;
          v.addContractForm.projectName = dat.projectName;
          //回显文件名
          let tmp = {
            name: dat.signImage.split("/")[dat.signImage.split("/").length - 1],
            url: dat.signImage,
          };
          v.fileList.length = 0;
          v.fileList.push(tmp);
          //如果是新增，则跳过供应商名赋值
          if (
            v.addContractForm.supplierName == null ||
            v.addContractForm.supplierName == undefined ||
            v.addContractForm.supplierName == ""
          )
            return;
          ////console.log("搜索指定的供应商姓名");
          for (let item of v.supplierNamesOps) {
            if (item.id == v.addContractForm.supplierId) {
              v.addContractForm.supplierName = item.name;
              ////console.log("已找到匹配的供应商名称");
              return;
            }
          }
          ////console.log("未找到指定的供应商名称");
        });
    },
    //提交表单数据
    cofime() {
      // this.addContractForm.fileUrls = "ssssss"
      ////console.log(this.addContractForm);
      let params = {
        pactId: this.addContractForm.contractId + "",
        cargoPactId: this.addContractForm.supplierCargoContractId,
        charging: this.addContractForm.charging,
        chargingUnit: this.addContractForm.chargingUnit,
        endDate: this.addContractForm.endDate,
        invoiceRate: this.addContractForm.invoiceRatio,
        invoiceType: this.addContractForm.invoiceType,
        pactName: this.addContractForm.contractName,
        pactNo: this.addContractForm.contractNum,
        period: this.addContractForm.period,
        periodUnit: this.addContractForm.periodUnit,
        projectName: this.addContractForm.projectName,
        earnestMoney: this.addContractForm.earnestMoney,
        remark: this.addContractForm.remark,
        startDate: this.addContractForm.startDate,
        steel: this.addContractForm.settle,
        steelUnit: this.addContractForm.settleUnit,
        supplierId: this.addContractForm.contractingPartyId,
        url: this.addContractForm.fileUrls,
      };
      ////console.log("params=" + JSON.stringify(params));
      let v = this;
      httpApi.contractManagementApi
        .editSupplierContractInfo(params)
        .then(function (rsp) {
          ////console.log(JSON.stringify(rsp.data));
          if (rsp.data.code == 200) {
            v.$message.success("操作成功");
            v.initDetails();
          }
        });
      this.visibleAddBox = false;
    },
    handleRemove(file, fileList) {
      ////console.log("handleRemove", file, fileList);
    },
    //点击文件列表中的文件，下载到本地
    handlePreview(file) {
      ////console.log("下载的文件信息=", file);
      window.location.href = file.url;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    //文件移除操作触发事件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //文件上传
    uploadFileSuccess(response, file, fileList) {
      ////console.log(JSON.stringify(response.data));
      this.addContractForm.fileUrls = response.data.url;
    },
    // 新增/编辑弹窗
    showAddDialog(mode) {
      if (mode == 1) {
        //新增模式
        this.dialogName = "新增合同";
        //将合同ID置为空
        this.addContractForm.contractId = "";
        //清空表单属性
        for (let item in this.addContractForm) {
          this.addContractForm[item] = "";
        }
        //重设表单单位属性
        this.addContractForm.chargingUnit = this.WeightArr[0].value;
        this.addContractForm.periodUnit = this.timeArr[0].value;
        this.addContractForm.settleUnit = this.timeArr[0].value;
      } else if (mode == 2) {
        //编辑模式
        this.dialogName = "编辑合同";
      }
      //延迟执行；清空上传文件列表
      // this.$nextTick(function () {
      //     this.$refs.uploadRef.clearFiles()
      // })
      let v = this;
      //组装请求参数
      let params2 = {
        like: "",
        size: 200,
      };
      //请求供应商名称列表
      httpApi.contractManagementApi.supplierNames(params2).then(function (rsp) {
        ////console.log("请求供应商名称列表响应=", rsp);
        v.supplierNames = JSON.parse(JSON.stringify(rsp.data.data));
        v.supplierNamesOps = rsp.data.data;
        v.supplierNamesLoading = false;
        //剔除没有name的数据
        for (let i = 0; i < v.supplierNamesOps.length; i++) {
          // ////console.log("v.cargoCNameOps[i]="+JSON.stringify(v.cargoCNameOps[i]))
          if (
            v.supplierNamesOps[i].name == null ||
            v.supplierNamesOps[i].name == ""
          ) {
            ////console.log("被移除的数据=" + JSON.stringify(v.supplierNamesOps[i]));
            v.$delete(v.supplierNamesOps, i);
            i--;
          }
          v.supplierNamesOps[i].index = i;
        }
        ////console.log("供应商姓名列表获取完毕", v.supplierNamesOps);
      });
      //组装请求参数
      let params = {
        like: "",
        size: 200,
      };
      //请求货主合同名称列表
      httpApi.contractManagementApi
        .cargoContractNames(params)
        .then(function (rsp) {
          v.cargoCNames = JSON.parse(JSON.stringify(rsp.data.data));
          v.cargoCNameOps = rsp.data.data;
          v.cargoCNamesLoading = false;
          //剔除没有name的数据
          for (let i = 0; i < v.cargoCNameOps.length; i++) {
            // ////console.log("v.cargoCNameOps[i]="+JSON.stringify(v.cargoCNameOps[i]))
            if (
              v.cargoCNameOps[i].name == null ||
              v.cargoCNameOps[i].name == ""
            ) {
              ////console.log("被移除的数据=" + JSON.stringify(v.cargoCNameOps[i]));
              v.$delete(v.cargoCNameOps, i);
              i--;
            }
            v.cargoCNameOps[i].index = i;
          }
          ////console.log("货主合同名称列表获取完毕", v.cargoCNameOps);
          // ////console.log("货主合同名称列表获取完毕=" + JSON.stringify(v.cargoCNameOps))
        });
      this.visibleAddBox = true;
    },
    //货主合同名称搜索
    cargoCNameSearch(query) {
      ////console.log("searchKey=" + query);
      this.cargoCNameOps.length = 0;
      this.cargoCNamesLoading = true;
      for (let item of this.cargoCNames) {
        //有的数据不完整，部分字段为空，因此必须判空
        if (
          item == null ||
          item == undefined ||
          item.name == null ||
          item.name == undefined
        )
          continue;
        if (item.name.indexOf(query) != -1) {
          this.cargoCNameOps.push(item);
        }
      }
      this.cargoCNamesLoading = false;
      ////console.log("货主合同名称搜索完成,cargoCNameOps=", this.cargoCNameOps);
    },
    //货主更换
    changeCargoCName(id) {
      ////console.log("选中的货主合同ID=" + id);
      this.addContractForm.supplierCargoContractId = id;
    },
    //供应商更换
    changeSupplierName(id) {
      ////console.log("选中的供应商ID=" + id);
      this.addContractForm.contractingPartyId = id;
    },
    //供应商名称搜索
    supplierNameSearch(query) {
      ////console.log("searchKey=" + query);
      this.supplierNamesOps.length = 0;
      this.supplierNamesLoading = true;
      for (let item of this.supplierNames) {
        //有的数据不完整，部分字段为空，因此必须判空
        if (
          item == null ||
          item == undefined ||
          item.name == null ||
          item.name == undefined
        )
          continue;
        if (item.name.indexOf(query) != -1) {
          this.supplierNamesOps.push(item);
        }
      }
      this.supplierNamesLoading = false;
      ////console.log("供应商名称搜索完成");
    },
    handleClick() { },
    initDetails() {
      let args = {
        contractId: this.contractId,
      };
      let v = this;
      httpApi.contractManagementApi
        .getSupplierContractDetails(args)
        .then(function (rsp) {
          ////console.log(rsp);
          if (rsp.data.code == 200) {
            ////console.log("获取详情数据成功");
            v.contractInfo = rsp.data.data;
            ////console.log(JSON.stringify(v.contractInfo));
          } else {
            ////console.log("详情数据获取失败，错误信息：" + rsp.data);
          }
        });
    },
  },
  mounted() {
    ////console.log("contractId=" + this.contractId);
    let args = {
      contractId: this.contractId,
    };
    httpApi.contractManagementApi.getSupplierContractDetails(args).then(res => {
      if (res.data.code == 200) {
        ////console.log("获取详情数据成功");
        this.contractInfo = res.data.data;
        //console.log(this.contractInfo)


      } else {
        ////console.log("详情数据获取失败，错误信息：" + rsp.data);
      }
    });
  },
  components: {
    breadcrumb,
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  flex: 1;
  background-color: #fff;
  height: 119px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 9px;

  .feeGroup {
    margin-left: auto;
    display: flex;
    width: 139px;

    .feeBox {
      display: flex;
      align-items: center;

      .intervalLine {
        width: 2px;
        height: 64px;
        background-color: #f0f0f0;
        margin-right: 20px;
      }

      .feeItem {
        display: flex;
        flex-direction: column;

        .tit {
          color: #a3a3a3;
          font-size: 12px;
          margin-bottom: 14px;
        }

        .price {
          color: #262626;
          font-size: 18px;
          font-weight: Bold;
        }
      }
    }
  }

  .icon-dingdan {
    font-size: 43px;
    margin-right: 10px;
  }

  .infoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .info_line1 {
      margin-bottom: 3px;
      display: flex;
      align-items: center;

      >.tit {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 8px;
        color: #262626;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 84px;
        height: 20px;
        color: #1890ff;
        font-size: 12px;
        text-align: center;
        line-height: 20px;

        &.gery {
          color: #a8b0b6;
          background-color: #a8b0b6;
        }
      }
    }

    .info_line2 {
      display: flex;
      color: #939393;
      font-size: 12px;
    }
  }

  .examineBtn {
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    width: 80px;
    height: 36px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }

    .icon-tianjiaxuqian {
      font-size: 15px;
      margin-right: 6px;
      color: #ffffff;
    }
  }
}

.main_item {
  padding: 36px 30px;
  background-color: #fff;
  min-height:calc(100vh - 255px);

  .contractfile {
    color: #1890ff;
    display: flex;
    align-items: center;
    transition: 0.2s;
    cursor: pointer;
    &:hover{
      opacity: 0.8;
    }

    .icon-lianjie {
      font-size: 12px;
    }

    .fileName {
      font-size: 12px;
      margin-left: 3px;
    }
  }
}

.dialog {

  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 19px 20px 17px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 40px 24px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  .data_picker {
    ::v-deep .el-input__inner {
      padding-left: 30px;
      width: 100%;
    }

    ::v-deep .el-input__prefix {
      //display: none;
    }
  }

  // 上传文件
  .upload {
    .uploadBtn {
      width: 80px;
      height: 32px;
      background-color: #fff;
      color: #000;
      font-size: 12px;
      cursor: pointer;
      border-radius: 4px;
      border-color: #ddd;
      transition: 0.2s;
      margin-right: 12px;
      margin-bottom: 8px;

      &:hover {
        opacity: 0.8;
        background-color: #ccc;
      }
    }

    .el-upload__tip {
      color: #cccccc;
      font-size: 12px;
    }

    ::v-deep .el-upload-list {
      background-color: #eef3f9;
    }

    ::v-deep .el-upload-list__item-name {
      padding: 7px 4px;
      color: #409eff;
      font-size: 12px;
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }

    ::v-deep .el-icon-document:before {
      color: #409eff;
      font-size: 16px;
    }

    ::v-deep .el-upload-list__item .el-icon-close {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .inputSelect_left {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  .inputSelect_right {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 0px 4px 4px 0px;
      border-left: none;
      background-color: #f5f7fa;
      font-size: 12px;
      color: #606266;
    }
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }

  ::v-deep .el-form-item__content {
    line-height: 0;
  }

  .notes ::v-deep .el-textarea .el-input__count {
    bottom: 15px;
    color: #c0c4cc;
  }
}
</style>
